<!-- 此vue为专班管理右侧成员信息页面 -->
<!-- 抄自../../system/modules/DeptUserInfo -->
<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <a-form layout="inline">
        <a-row :gutter="10">
          <a-col :md="10" :sm="12">
            <a-form-item label="用户账号" style="margin-left:8px">
              <j-input allowClear placeholder="请输入账号" v-model="zhanghaoinput"></j-input>
            </a-form-item>
          </a-col>
          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="6" :sm="24">
              <!-- <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 18px">查询</a-button> -->
              <a-button type="primary" @click="searchData()" icon="search" style="margin-left: 18px">查询</a-button>

              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </a-col>
          </span>
        </a-row>
      </a-form>
    </div>
    <!-- 操作按钮区域 -->
    <div class="table-operator" :md="24" :sm="24" style="margin-top: 0;">
      <a-button @click="handleAddUserDepart" type="primary">通讯录添加</a-button>
      <a-button @click="handleAdd" type="primary" style="margin-top: 16px">新建成员</a-button>
      <a-upload
        v-has="'user:depart:import'"
        name="file"
        :showUploadList="false"
        :multiple="false"
        :headers="tokenHeader"
        :action="importExcelUrl"
        @change="handleImportExcel">
      </a-upload>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="2" @click="batchDel">
            <a-icon type="delete" />
            删除
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作
          <a-icon type="down"/>
        </a-button>
      </a-dropdown>
    </div>
    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">取消选择</a>
      </div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">
        <span slot="action" slot-scope="text, record">
          <a @click="handleDetail(record)">详情</a>
          <a-divider type="vertical"/>
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical"/>
          <a>
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
              <a>删除</a>
            </a-popconfirm>
          </a>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->
    <!-- 表单区域 -->
    <user-modal ref="modalForm" @ok="modalFormOk"></user-modal>
    <Select-User-Modal ref="selectUserModal" @selectFinished="selectOK"></Select-User-Modal>
  </a-card>
</template>

<script>
// 通讯录添加
import SelectUserModal from '../../system/modules/SelectUserModal'
// import SelectUserModal from './SelectUserInform'
// 新建成员
import UserModal from './NewMemberList.vue'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction, postAction } from '@/api/manage'

export default {
  name: 'ScSubjectMemberInform',
  components: {
    SelectUserModal,
    UserModal

  },
  mixins: [JeecgListMixin],
  data() {
    return {
      description: '成员信息',
      currentDeptId: '',
      currentDeptCode: '',
      zhanghaoinput: '',
      jydataSource2: [], // 查询功能使用
      selectdataSource2: [], // 查询功能查询出的数组

      // 表头
      columns: [{
        title: '姓名',
        align: 'center',
        dataIndex: 'contactName'
      },
      {
        title: '手机号',
        align: 'center',
        dataIndex: 'mobilePhone'
      },
      {
        title: '联系电话',
        align: 'center',
        dataIndex: 'telephone'
      },
      {
        title: '排序',
        align: 'center',
        dataIndex: 'sortNum'
      },
      {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
        align: 'center',
        width: 250
      }],
      url: {
        // 专班信息表-获取专班成员信息
        list: '/subject/scSubjectExpertClass/memberList',
        // 专班信息表-编辑
        edit: '/subject/scSubjectExpertClass/edit',
        // 专班信息表-通过id删除
        delete: '/subject/scSubjectExpertClass/delete',
        // 专班信息表-批量删除
        deleteBatch: '/subject/scSubjectExpertClass/deleteBatch'
      }
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    // 重置功能
    searchReset() {
      this.queryParam = {}
      this.zhanghaoinput = ''
      this.loadData(1)
    },

    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      // if (this.currentDeptId === '') return
      const params = this.getQueryParams() // 查询条件
      params.id = this.currentDeptId
      params.code = this.currentDeptCode
      console.log('搜索内容：', params)
      getAction(this.url.list, params).then((res) => {
        if (res.success && res.result) {
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
        } else {
          this.clearList()
          this.ipagination.total = 0
        }
      })
    },
    open(record) {
      this.currentDeptId = record.id
      this.currentDeptCode = record.code
      this.loadData(1)
    },
    // 查询功能
    searchData() {
      // this.jydataSource2 = this.dataSource
      // const searchcontent = this.zhanghaoinput
      // if (searchcontent === '') {
      //   this.$message.warning('查询条件不能为空!')
      // } else {
      //   for (let i = 0; i < this.jydataSource2.length; i++) {
      //     if (this.jydataSource2[i].contactName === searchcontent) {
      //       const list2 = {
      //         contactName: this.jydataSource2[i].contactName,
      //         mobilePhone: this.jydataSource2[i].mobilePhone,
      //         telphone: this.jydataSource2[i].telphone,
      //         sortNum: this.jydataSource2[i].sortNum
      //       }
      //       this.selectdataSource2.push(list2)
      //     }
      //   }
      //   this.dataSource = this.selectdataSource2
      //   this.selectdataSource2 = []
      // }
      this.loadData()
    },

    clearList() {
      this.currentDeptId = ''
      this.dataSource = []
    },
    // 通讯录添加功能
    handleAddUserDepart() {
      if (this.currentDeptId === '') {
        this.$message.error('请选择一个部门!')
      } else {
        this.$refs.selectUserModal.visible = true
        this.$refs.selectUserModal.searchReset()
      }
    },
    // 编辑功能
    handleEdit: function(record) {
      this.$refs.modalForm.title = '编辑'
      this.$refs.modalForm.departDisabled = true
      this.$refs.modalForm.disableSubmit = false
      this.$refs.modalForm.edit(record)
    },
    // 新建成员功能
    handleAdd: function() {
      if (this.currentDeptId === '') {
        this.$message.error('请选择一个部门!')
      } else {
        this.$refs.modalForm.departDisabled = true
        this.$refs.modalForm.userDepartModel.departIdList = [this.currentDeptId] // 传入一个部门id
        this.$refs.modalForm.add()
        this.$refs.modalForm.title = '新增'
      }
    },
    selectOK(data) {
      const params = {}
      params.depId = this.currentDeptId
      params.userIdList = []
      for (var a = 0; a < data.length; a++) {
        params.userIdList.push(data[a])
      }
      console.log(params)
      postAction(this.url.edit, params).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    modalFormOk() {
      this.loadData(1)
    }
  }
}
</script>

<style scoped>
  /** Button按钮间距 */
  .ant-btn {
    margin-left: 3px;
  }

  .ant-card {
    margin-left: -30px;
    margin-right: -30px;
  }

  ::v-deep .ant-card-body {
    padding-top: 0 !important;
  }

  .table-page-search-wrapper .ant-form-inline .ant-form-item {
    margin-bottom: 0;
  }

  .table-page-search-wrapper .table-page-search-submitButtons {
    margin-bottom: 0;
  }
</style>
